<!DOCTYPE html>  
<html>  
<body>  
  
<div id="myDiv" style="width:200px;height:200px;background-color:lightblue;">  
  右键点击此区域查看自定义菜单  
</div>  
  
<div id="customMenu" style="display:none; position:absolute; background-color:white; border:1px solid black; padding:10px;">  
  <p>自定义菜单项 1</p>  
  <p>自定义菜单项 2</p>  
  <p>自定义菜单项 3</p>  
</div>  
  
<script>  
// 获取需要添加右键事件的元素和自定义菜单元素  
var div = document.getElementById('myDiv');  
var customMenu = document.getElementById('customMenu');  
  
// 为元素添加contextmenu事件监听器  
div.addEventListener('contextmenu', function(e) {  
  // 阻止默认的右键菜单显示  
  e.preventDefault();  
  
  // 显示自定义菜单，并设置其位置为鼠标当前位置  
  customMenu.style.display = 'block';  
  customMenu.style.left = e.pageX + 'px';  
  customMenu.style.top = e.pageY + 'px';  
});  
  
// 为文档添加click事件监听器，用于隐藏自定义菜单（当用户点击了菜单之外的地方）  
document.addEventListener('click', function() {  
  customMenu.style.display = 'none';  
});  
</script>  
  
</body>  
</html>